<!--
 * @Description: 
 * @Version: 1.0
 * @Author: wenbin
 * @Date: 2021-03-31 11:33:17
 * @LastEditors: wenbin
 * @LastEditTime: 2021-08-11 10:56:09
 * @FilePath: /magus-plugin/examples/views/Home.vue
 * Copyright (C) 2021 wenbin. All rights reserved.
-->
<template>
  <div class="home">
    <magus-main-layout leftWidth="20%">
      <template slot="layoutLeft">
        <div class="equipInfo-layout-tree">
          <magus-tree
            :treeData="treeData"
            @reloadTree="reloadTree"
            @clickNode="clickNode"
            @deleteNode="deleteNode"
            @changeNode="changeNode"
            :magusIconClass="magusIconClass"
            :magusIconStyle="magusIconStyle"
            :nodeIsNeedEdit="nodeIsNeedEdit"
            :isNeedSearch="false"
            :isNeedReload="false"
            :isEdit="true"
            :highlight="false"
          >
            <!-- <template slot-scope="scope">
              {{ scope.treeMore.text }}
            </template> -->
            <!-- <template slot="treeButton">
              <el-button type="text" size="mini">新增</el-button>
              <el-button type="text" size="mini">新增</el-button>
            </template> -->
            <template slot="treeFooter">
              <ul class="treeFooter-default">
                <li class="treeFooter-default-total">
                  <span class="total-title">总计：</span>
                  <span class="treeFooter-num"></span>
                </li>
                <li class="treeFooter-default-online">
                  <span class="online-title">在线：</span>
                  <span class="treeFooter-num"></span>
                </li>
                <li class="treeFooter-default-offline">
                  <span class="offline-title">离线：</span>
                  <span class="treeFooter-num"></span>
                </li>
              </ul>
            </template>
          </magus-tree>
        </div>
      </template>
      <template slot="layoutTab">
        <magus-tab :tabData="tabData">
          <template slot="tabName">11111</template>
        </magus-tab>
      </template>
      <template slot="layoutSearch">
        <magus-search>
          <template slot="form">
            <el-col :span="6">
              <el-form-item label="测试">
                <el-input size="mini" placeholder="1111" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="测试11">
                <el-date-picker
                  size="mini"
                  v-model="overviewDate"
                  type="daterange"
                  :picker-options="pickerOptions"
                  value-format="timestamp"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <magus-select-tree
                :options="treeData"
                placeholder="请选择菜单"
                @getValue="getValue"
              ></magus-select-tree>
            </el-col>
            <el-col :span="6">
              <el-form-item>
                <el-button type="primary" size="mini">查询</el-button>
              </el-form-item>
            </el-col>
          </template>
          <!-- <template slot="moreForm">
            <el-form-item label="测试">
              <el-input v-model="query.name"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="mini">查询</el-button>
            </el-form-item>
          </template> -->
        </magus-search>
      </template>
      <template slot="mainButton">
        <el-button type="primary" @click="getCode" size="mini">{{
          $t("global.EditPassword")
        }}</el-button>
        <el-button
          type="primary"
          plain
          @click="dialogData.isShow = true"
          size="mini"
          icon="el-icon-info"
          >新增</el-button
        >
        <el-button type="danger" plain @click="goTestApi" size="mini"
          >测试202</el-button
        >
        <el-button type="danger" plain @click="getDictionary" size="mini"
          >测试接口重复提交</el-button
        >
        <magus-validate-code @change="changeCode"></magus-validate-code>
      </template>
      <template slot="layoutMain">
        <el-table
          border
          size="mini"
          :data="tableData"
          height="100%"
          style="width: 100%"
        >
          <el-table-column prop="date" label="日期" width="180">
          </el-table-column>
          <el-table-column prop="name" label="姓名" width="180">
          </el-table-column>
          <el-table-column prop="address" label="地址"> </el-table-column>
          <el-table-column
            prop="extend.type"
            label="类型"
            :formatter="this.$dictFormat('extend.type', 'APPSTORE_CLASSIFY')"
          >
          </el-table-column>
        </el-table>
      </template>
      <template slot="mainPagebar">
        <magus-paging
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="query.pageNum"
          :page-sizes="[1, 10, 20, 30, 40]"
          :page-size="query.pageSize"
          layout="sizes, prev, pager, next, jumper"
          :total="query.count"
        ></magus-paging>
      </template>
    </magus-main-layout>
    <!-- <magusChooseIcon
      :isShow="dialogData.isShow"
      @cancelChoose="dialogData.isShow = false"
      @changeIcon="changeIcon"
    >
    </magusChooseIcon> -->
    <magus-validate-code-dialog
      title="测试"
      tip="警告：您正在执行启动风机操作，该操作会影响风机运行状态，请输入下方验证码确认操作！"
      :isShow="dialogData.isShow"
      @cancel="dialogData.isShow = false"
      @compare="compare"
    >
    </magus-validate-code-dialog>
  </div>
</template>

<script>
import testApi from "@examples/api/test.js";
import appsApi from "@examples/api/auth";
// import dictsApi from "@examples/api/dicts";
export default {
  name: "Home",
  components: {},
  data() {
    return {
      mirrorCode: "",
      dialogData: {
        isShow: false,
        title: "测试新增",
      },
      overviewDate: [],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一年",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30 * 12);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          extend: {
            type: "UPLOAD_APP",
          },
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
          extend: {
            type: "UPLOAD_APP",
          },
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
          extend: {
            type: "UPLOAD_APP",
          },
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
          extend: {
            type: "UPLOAD_APP",
          },
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
          extend: {
            type: "",
          },
        },
      ],
      query: {
        name: "",
        pageNum: 1,
        pageSize: 20,
        count: 0,
      },
      treeData: [],
      tabData: [
        {
          text: "设备测点",
          path: "/",
          sonPath: ["/point/addPoint"],
        },
        {
          text: "设备信息",
          path: "/info/page",
        },
      ],
      menuId: "",
    };
  },
  watch: {
    value: {
      deep: true,
      handler: function(val) {
        console.log(val);
      },
    },
  },
  methods: {
    changeCode(val) {
      console.log(val);
    },
    compare() {
      console.log("11111");
    },
    getApps() {
      this.$magusCloudApi.apiConfig
        .get(appsApi.getAllApp, {}, { test: "111111111" }, { timeout: 1 })
        .then((res) => {
          console.log(res);
        });
    },
    getDictionary() {
      this.$magusCloudApi.apiConfig
        .get(appsApi.getEquipmentinstances)
        .then((res) => {
          console.log(res);
        });
    },
    getCode() {
      // this.$refs.codeMirror.getCode();
      // console.log(this.mirrorCode);
      // let message = "测试";
      // var elMessage = document.createElement("div");
      // elMessage.className = "el-message el-message--error";
      // elMessage.style = "z-index: 3000;";
      // var elMessageInner = `<i class="el-message__icon el-icon-error"></i><p class="el-message__content">${message}</p>`;
      // elMessage.innerHTML = elMessageInner;
      // document.body.appendChild(elMessage);
      // setTimeout(() => {
      //   elMessage.remove();
      // }, 3000);
      // console.log(elMessage);
      window.open(window.location.origin, "_blank");
    },
    goTestApi() {
      this.$magusCloudApi.apiConfig
        .post(
          testApi.test202("asdasd1231"),
          {},
          { "Mlink-URL": testApi.mlinkApi }
        )
        .then(() => {})
        .catch(() => {});
    },
    handleSizeChange() {},
    handleCurrentChange() {},
    changeIcon(datas) {
      console.log(datas);
    },
    getValue(datas) {
      console.log(datas);
    },
    chooseTree(datas) {
      console.log(datas);
    },
    reloadTree() {
      /**
       * @description:打印 default 样式的文字
       * @param {String} text
       * @return {*}
       */
      this.$magusCloudApi.logUtils.default("reloadTree");
    },
    clickNode(datas) {
      console.log(datas);
    },
    deleteNode(datas) {
      console.log(datas);
    },
    changeNode(datas) {
      console.log(datas);
    },
    magusIconClass(node) {
      if (node.level > 1) {
        return "magusdipshujukanban";
      } else {
        return "magusdipwenjianjia";
      }
    },
    magusIconStyle(node) {
      if (node.level > 1) {
        return { color: "green" };
      } else {
        return { color: "red" };
      }
    },
    nodeIsNeedEdit(node, data) {
      if (data.extend.edit === false) {
        return false;
      } else {
        return true;
      }
    },
  },
  mounted() {
    this.treeData = JSON.parse(localStorage.getItem("menu"));
    let projectname = this.$magusCloudApi.catchUtil.getSession("projectname");
    console.log(projectname);
  },
};
</script>

<style lang="scss" scoped>
.home {
  height: 100%;
  width: 100%;
  .equipInfo-layout-tree {
    height: 100%;
  }
}
</style>
